<template>
  <img
    :style="{
      top: props.top + 'px',
      left: props.left + 'px',
    }"
    class="vavle3"
    v-if="props.value == 1"
    src="./images/on.svg"
  />
  <img
    :style="{
      top: props.top + 'px',
      left: props.left + 'px',
    }"
    class="vavle3"
    v-else
    src="./images/off.svg"
  />
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "Vavle3",
});
</script>
<script setup>
const props = defineProps({
  value: {
    default: 0,
  },
  top: {
    default: 0,
  },
  left: {
    default: 0,
  },
});
</script>

<style lang="scss" scoped>
.vavle3 {
  position: absolute;
  transform: rotate(-90deg);
}
</style>
